<!--
  数据库连接表单
-->
<template>
  <el-form
      ref="menuForm"
      :model="connForm"
      label-width="120px" size="mini">
    <el-row>
      <el-col :span="10">
        <el-form-item label="连接名称：">
          <el-input v-model="connForm.name" placeholder="请输入连接名称"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="10">
        <el-form-item label="驱动类型：">
          <el-select
              v-model="connForm.driveType"
              placeholder="请选择驱动类型"
              size="mini"
              @change="">
            <el-option
                v-for="item in driveTypes"
                :key="item"
                :label="item"
                :value="item">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="10">
        <el-form-item label="主机：">
          <el-input v-model="connForm.host" placeholder="请输入主机"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="10">
        <el-form-item label="端口：">
          <el-input v-model="connForm.port" placeholder="请输入端口"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="10">
        <el-form-item label="用户名：">
          <el-input v-model="connForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="10">
        <el-form-item label="密码：">
          <el-input v-model="connForm.password" placeholder="请输入密码" type="password"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
export default {
  name: "ConnectionForm",
  props: ['connData'],
  data() {
    return {
      connForm: {
        name: '',
        driveType: '',
        host: 'localhost',
        port: '3306',
        username: '',
        password: ''
      },
      driveTypes: ['MySQL', 'Oracle', 'SQLServer'],
    }
  },
  methods: {
    takeFormData() {
      return this.connForm;
    }

  },

  created() {
    this.$bus.on('edit-conn', (operType, connData) => {
      if (operType === "edit") {
        // 是编辑操作
        this.connForm = Object.assign(this.connForm, connData);
      }
    })
  },

  mounted() {

  }
}
</script>

<style scoped>

</style>